<template>
	<view class="select-food" :class="{'select-food-active': item.selected}" @click="select()">
		<image class="food-image" :src="item.image" mode="aspectFill"></image>
		<view class="food-info">
			<view class="food-title-box">
				<text class="food-title">{{item.storeName}}</text>
				<text class="food-delete" @click.stop="remove()">删除</text>
			</view>
			<!-- <picker class="food-type-picker" mode="selector" :range="type" range-key="name">
				<view class="food-type">
					<text>{{type[typeIndex].name}}</text>
					<image class="drop-icon" src="../../static/drop.svg" mode="aspectFit"></image>
				</view>
			</picker> -->
			<view class="food-type-picker" @click.stop="chooseSpecification()">
				<view class="food-type">
					<text>{{item.sku}}</text>
					<image class="drop-icon" src="../../static/drop.svg" mode="aspectFit"></image>
				</view>
			</view>
			<view class="price-box">
				<text class="price">¥ {{item.price}}</text>
				<counter @change="numberChange" ref="counter"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"select-food",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			popup: {},
			cart: {}
		},
		data() {
			return {
				type: [
					{
						name: '大份'
					},
					{
						name: '中份'
					},
					{
						name: '小份'
					}
				],
				typeIndex: 0
			};
		},
		mounted() {
			this.$refs.counter.number = this.item.cartNum
		},
		updated() {
			this.$refs.counter.number = this.item.cartNum
		},
		methods: {
			select() {
				this.item.selected = !this.item.selected
				this.cart.runPriceTotal()
			},
			async numberChange(e) {
				this.cart.submit && clearTimeout(this.cart.submit)
				this.cart.submit = setTimeout(() => {
					this.uploadNumber(e)
				}, 600)
			},
			async uploadNumber(number) {
				uni.showLoading({
					title: '数量更新中',
					mask: true
				})
				await this.$api.delCart(this.item.id)
				this.$api.addCart({
					id: 0,
					uid: 0,
					type: '',
					productId: this.item.productId,
					shopId: uni.getStorageSync('info').shopId,
					productAttrUnique: this.item.productAttrUnique,
					cartNum: number,
					cashierUserId: uni.getStorageSync('info').userId
				}).then(res => {
					this.cart.getCarts()
				})
			},
			chooseSpecification() {
				this.popup.getFoodDetail(this.item.productId, this)
			},
			remove() {
				uni.showModal({
					title: '提示',
					content: '是否从购物车删除此项?',
					success: model => {
						if (model.confirm) {
							this.$api.delCart(this.item.id)
							.then(res => {
								this.cart.getCarts()
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.select-food{
		display: flex;
		flex-direction: row;
		padding: 6px 13px;
		box-sizing: border-box;
		border-bottom: 1px solid #f7f7f8;
	}
	
	.select-food-active {
		background: #ebf1f7;
	}
	
	.food-image {
		width: 64px;
		height: 64px;
		border-radius: 14px;
	}
	
	.food-info {
		flex: 1;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.food-title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.food-title {
		font-size: calc(var(--base) * 14);
		color: #333;
		flex: 1;
		padding-right: 10px;
	}
	
	.food-delete {
		font-size: calc(var(--base) * 12);
		color: #1890ff;
	}
	
	.food-type-picker {
		align-self: flex-start;
	}
	
	.food-type {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: calc(var(--base) * 12);
		color: #333;
	}
	
	.drop-icon {
		width: calc(var(--base) * 12);
		height: calc(var(--base) * 12);
		padding-left: 6px;
	}
	
	.price-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.price {
		font-size: calc(var(--base) * 12);
		color: #f00;
		flex: 1;
		padding-right: 10px;
	}
</style>